<template>
	<view class="component">
		<!-- <block v-if="hasPriceTypes.length > 0">
			<view class="msgItem" v-for="priceItem in hasPriceTypes" :key="priceItem.value">
				<text class="tit col-grey">{{priceItem.label}}单价：</text>
				<text class="fontBold">{{priceItem.price}}元/m²</text>
			</view>
		</block> -->

		<view class="msgItem">
			<text class="tit">参考价格：</text>
			<view class="valueBox" :class="{'fontBold font15 col-error': detail.price}">
				{{detail.price ? detail.price + '元/m²' : '待定'}}
			</view>
		</view>

		<view class="msgItem">
			<text class="tit">入市面积：</text>
			<view class="valueBox" :class="{'fontBold font15 col-error': detail.size}">
				{{detail.size ? detail.size + 'm²' : '待定'}}
			</view>
		</view>

		<view class="msgItem">
			<text class="tit">推出套数：</text>
			<view class="valueBox" :class="{'fontBold font15 col-error': detail.house_count}">
				{{detail.house_count ? detail.house_count + '套' : '待定'}}
			</view>
		</view>
	</view>
</template>

<script setup>
	import { computed } from 'vue';
	const props = defineProps({
		detail: {
			type: Object,
			default: () => ({})
		}
	});

	let hasPriceTypes = computed(() => {
		return props.detail.price_list.filter(item => item.price > 0);
	});
</script>

<style lang="scss" scoped>
.component{
	margin: 40rpx 22rpx 0 22rpx;
	.msgItem{
		margin-top: 25rpx;
		line-height: 1.3;
		.tit{
			width: 140rpx;
		}
		.valueBox{
			width: calc(100% - 175rpx);
			display: inline-block;
			vertical-align: text-top;
		}
	}
}
</style>
